﻿<div class="ui-widget-content">
    <h3>Droppable - Aceitação de draggables</h3>
    <p>
        Nem sempre você quer que qualquer draggable seja "dropado" em qualquer droppable, às vezes você quer apenas determinados tipos.
        E mesmo quando quer, muitas vezes é importante saber qual é o draggable. Por exemplo:
    </p>
    <p>
        <span class="draggable_free draggable_rosa" style="padding: 0px">Maria</span>
        <span class="draggable_free draggable_rosa" style="padding: 0px">Fernanda</span>
        <span class="draggable_free draggable_rosa" style="padding: 0px">Juliana</span>
        <span class="draggable_free draggable_azul" style="padding: 0px">João</span>
        <span class="draggable_free draggable_azul" style="padding: 0px">Carlos</span>
        <span class="draggable_free draggable_azul" style="padding: 0px">Pedro</span>
    </p>
    <p>
        <div id="droppable_aceita_homem" class="ui-widget-content" style="width: 300px; padding: 5px; float: left; margin-right: 5px">
            <p>Escolha um homem e coloque aqui!</p>
        </div>
        <div id="droppable_aceita_mulher" class="ui-widget-content" style="width: 300px;padding: 5px; float: left; margin-left: 5px">
            <p>Escolha uma mulher e coloque aqui!</p>
        </div>
        <div style="clear: both"></div>
    </p>
    <p>Para fazer isso, usamos:</p>
    <p><code class="draggable_free" id="codigo_draggable_accept_1">$("#meus_draggables").draggable();</code></p>
    <p><code class="draggable_free" id="codigo_draggable_accept_2">$("#meus_outros_draggables").draggable();</code></p>
    <p>
        <pre id="droppable_aceita_codigo_1">$(".meu_droppable").droppable({
    accept: "#meus_draggables",
    drop: function(event, ui) {
        var draggableQueEstaNesteDroppable = ui.draggable;
        ...
    },
    out: ...,
});</pre>
    </p>
    <p>
        A propriedade activeClass pode ser usada para realçar o droppable que aceita o elemento sendo arrastado.
        A propriedade hoverClass pode ser usada para realçar o droppable quando o droppable está sobre ele:
    </p>
    <p>
        <pre id="droppable_aceita_codigo_2">$(".meu_droppable").droppable({
    accept: "#meus_outros_draggables",
    activeClass: "minha_classe_droppable_active",
    hoverClass: "minha_classe_droppable_hover"
});</pre>
    </p>
    <script type="text/javascript">
        inicializador.droppableAceitacao = function() {
            $("#droppable_aceita_homem").droppable({
                accept: ".draggable_azul",
                drop: function(event, ui) {
                    $(this).find("p").html("Homem aceito: " + ui.draggable.html());
                },
                out: function(event, ui) {
                    $(this).find("p").html("Escolha um homem e coloque aqui!");
                }
            });
            $("#droppable_aceita_mulher").droppable({
                accept: ".draggable_rosa",
                drop: function(event, ui) {
                    $(this).find("p").html("Mulher aceita: " + ui.draggable.html());
                },
                out: function(event, ui) {
                    $(this).find("p").html("Escolha uma mulher e coloque aqui!");
                }
            });
            $("#droppable_aceita_codigo_1").droppable({
                accept: "#codigo_draggable_accept_1",
                drop: function(event, ui) {
                    $(this).addClass("draggable_azul", 300);
                },
                out: function(event, ui) {
                    $(this).removeClass("draggable_azul", 300);
                }
            });
            $("#droppable_aceita_codigo_2").droppable({
                accept: "#codigo_draggable_accept_2",
                drop: function(event, ui) {
                    $(this).addClass("draggable_rosa");
                },
                out: function(event, ui) {
                    $(this).removeClass("draggable_rosa");
                },
                activeClass: "droppable_active",
                hoverClass: "droppable_hover"
            });
        }
    </script>
</div>